<!DOCTYPE html>
<html lang="en">
<head>
      <!-- 设置头部信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="智能S21-2班雒郝名">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>散点图</title>
    <script src="js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="css/jquery.stepy.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body{
            overflow-x: hidden;
            overflow-y: scroll;
        }
        table{
            border-collapse: collapse;
            border: 1px solid #ccc;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            overflow: auto;
        }
        th{
            background-color: rgb(153, 151, 151);
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        td{
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .btn {
            margin-left: 5px;
        }
        
    </style>
</head>
<!-- echarts图标实现案例1 -->
<body>
    <div class="wrapper">
        <!-- 表格部分 -->
        <!-- <div id="main" style="width: 100%;height:400px;"></div> -->
        <table id="customer" border="1" style="border-collapse:collapse;text-align: center;align-items: center;">
        <tr>
            <th>客户编号</th>
            <th>客户姓名</th>
            <th>客户年龄</th>
            <th>身份证号</th>
            <th>手机号</th>
            <th>地址</th>
            <th>剩余金额</th>
            <th>客户身份</th>
            <th>操作</th>
        </tr>
        <script>
                        function xiugai() {
                alert("该功能正在开发中，敬请期待…");

            }
            function shanchu() {
                alert("该功能正在开发中，敬请期待…");

            }
            fetch('http://localhost:8080/datas2').then(res=>res.json()).then(json=>{
                for (var i = 0; i < json.adatas.length; i++) {
                    var tr = document.createElement('tr');
                    var td1 = document.createElement("td");
                    var td2 = document.createElement("td");
                    var td3 = document.createElement("td");
                    var td4 = document.createElement("td");
                    var td5 = document.createElement("td");
                    var td6 = document.createElement("td");
                    var td7 = document.createElement("td");
                    var td8 = document.createElement("td");
                    var td9 = document.createElement("td");
                    td1.innerText = json.adatas[i];
                    td2.innerText = json.xdatas[i];
                    td3.innerText = json.ydatas[i];
                    td4.innerText = json.bdatas[i];
                    td5.innerText = json.zdatas[i];
                    td6.innerText = json.cdatas[i];
                    td7.innerText = json.ddatas[i];
                    td8.innerText = json.edatas[i];
                    td9.innerHTML = '<button id="btn1" class="btn btn-danger" onclick="xiugai()">修改</button><button id="btn2"  onclick="shanchu()" class="btn btn-danger">删除</button>';
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    tr.appendChild(td5);
                    tr.appendChild(td6);
                    tr.appendChild(td7);
                    tr.appendChild(td8);
                    tr.appendChild(td9);
                    document.getElementById("customer").appendChild(tr);

                }
                var table = document.getElementById("customer");
                var tr = table.getElementsByTagName("tr");
                for (var i=1;i<tr.length;i++){
                    tr[i].style.backgroundColor = "skyblue";
                    tr[i].onmouseover = function () {
                        this.style.backgroundColor = "#c1e0ff";
                    }
                    tr[i].onmouseout = function () {
                        this.style.backgroundColor = "#redyellow";
                    }
                }
            })
        </script>
        </table>
                <!-- 图表部分 -->
                <!-- 创建一个容纳echart图表的容器 -->
                <div id="main" style="width: 600px; height: 400px;"></div>
 
                <style>
                 /* 使echart图以合适的大小出现 */
                    #main {
                        width: 600px;
                        height: 400px;
                        margin: 0 auto;
                        margin-top: 20px;
                    }
                </style>

    <!-- 引入Echarts文件 -->
<script src="js/echarts.js"></script>


<!-- Echarts使用流程
1.导入插件：导入echarts.js，注意相对路径是否正确
2.创建容器：创建一个容纳echarts图表的容器，一般为div
3.创建echarts实例：创建一个变量，并为调用echarts.init方法为它赋值，传入容器

4.配置echarts非data属性：设置echarts图表类型等参数
5.异步获取echart图标中的数据点集合
  5.1-->
<script>
    // 3.创建echarts实例：创建一个变量，并为调用echarts.init方法为它赋值，传入容器
    var myChart = echarts.init(document.getElementById('main'));

    // 4.配置echarts非data属性：设置echarts图表类型等参数
var option;

option = {
    title: {
        text: '年龄分布',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['年龄']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {},
    series: [
      {
        symbolSize: 10,
        data: [],
        type: 'scatter'
      }
    ]
  };
//   显示echarts图像
myChart.setOption(option);
 // 5.异步获取echart图标中的数据点集合
 fetch('datas2').then(res=>res.json().then(res=>{
        myChart.setOption({
            xAxis: {
            data: res.xdatas
        },
        series: [
            {
                name: '年龄',
            data: res.ydatas,
            }
        ]
                });
            }))
        
</script>


</body>

</html>